<script lang="ts" setup>
import { useFileTransStore } from '@/stores/fileTransStore'; // 使用 Pinia store
import { storeToRefs } from 'pinia';
import { onMounted, ref, watch } from 'vue';

// 定义接口以增强类型安全
interface KeyPoint {
  Question: string;
  Answer: string;
}

// 获取 fileTransStore
const fileTransStore = useFileTransStore();
const { summarization } = storeToRefs(fileTransStore);

// 用于显示内容的响应式数据
const keyPointsData = ref<KeyPoint[]>([]);

// 从 summarization 中提取 QuestionsAnsweringSummary
const updateKeyPointsData = () => {
  keyPointsData.value = summarization.value?.QuestionsAnsweringSummary || [];
};

// 监听 summarization 的变化
watch(summarization, (newVal) => {
  updateKeyPointsData(); // 更新 keyPointsData 的内容
}, { immediate: true });

// 初始化时获取数据
onMounted(() => {
  updateKeyPointsData(); // 确保组件挂载时初次获取数据
});
</script>

<template>
  <div class="container">
    <div
      v-for="(item, index) in keyPointsData"
      :key="index"
      class="keyPoint"
    >
      <div class="label">
        要点
      </div>
      <div class="content">
        <h3 class="question">
          {{ item.Question }}
        </h3>
        <p class="answer">
          {{ item.Answer }}
        </p>
        <p class="speaker">
          <img src="@/assets/729.png" alt="Speaker Icon" class="speakerIcon">
          发言人 1
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  border-radius: 8px;
  margin-top: -30px;
}

.keyPoint {
  display: flex;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f6f5fd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.label {
  font-size: 14px;
  font-weight: bold;
  color: #003399;
  padding: 5px;
  margin-right: 20px;
  margin-top: 15px;
  background-color: #e6e6ff;
  border-radius: 4px;
  min-width: 60px;
  text-align: center;
  align-self: flex-start;
}

.content {
  flex: 1;
}

.question {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px;
  color: #333;
  text-align: left;
  border-radius: 4px;
  margin-left: -10px;
  margin-top: 0px;
}

.answer {
  text-align: left;
  font-size: 14px;
  color: #333;
  margin: 10px 0;
  line-height: 1.6;
}

.speaker {
  margin-top: 0px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #888;
  text-align: right;
}

.speakerIcon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
</style>
